<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/dashboard/maps.css">	

<div class="inner-nav">
	<a class="nav-btn" ng-click="vlist=true">Danh sách</a> &nbsp; | &nbsp;
	<a class="nav-btn" ng-click="vlist=false">Tạo bản đồ</a>
</div>

<div class="wrapper create-tool" ng-hide="vlist">
	<!-- <h2>DESIGN</h2> -->

	<div id="design-map"> <!-- Map here --> </div>
	<br>
	<div class="panel panel-primary">
		<div class="panel-heading">
			Thiết kế bản đồ
		</div>
		<div class="panel-body">
			<div role="tabpanel">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active">
						<a href="#t-general" aria-controls="general" role="tab" data-toggle="tab" ng-click="tab='home'">Thông tin chung</a>
					</li>
					<li role="presentation">
						<a href="#t-markers" aria-controls="markers" role="tab" data-toggle="tab" ng-click="tab='marker'">Đánh dấu</a>
					</li>
					<li role="presentation">
						<a href="#t-polygons" aria-controls="polygons" role="tab" data-toggle="tab"ng-click="tab='polygon'">Vùng</a>
					</li>
					<li role="presentation">
						<a href="#t-polylines" aria-controls="polylines" role="tab" data-toggle="tab"ng-click="tab='polyline'">Đường</a>
					</li>
					<li role="presentation">
						<a href="#t-provinces" aria-controls="provinces" role="tab" data-toggle="tab"ng-click="tab='province'">Tỉnh VN</a>
					</li>
					<li role="presentation">
						<a href="#t-countries" aria-controls="countries" role="tab" data-toggle="tab"ng-click="tab='country'">Quốc gia</a>
					</li>
					<li role="presentation">
						<a href="#t-grounds" aria-controls="countries" role="tab" data-toggle="tab"ng-click="tab='ground'">Ảnh lược đồ</a>
					</li>
				</ul> 
				<br />	
				<!-- Tab panes -->
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane fade in active" id="t-general">
						<label for="">Chọn thời kỳ lịch sử: </label> &nbsp; 
						<input type="checkbox" value="1" ng-model="isVn"> LS Việt Nam
						<select class="category form-control" ng-model="newmap.category">
							<option ng-repeat="cat in categories | catFilter:isVn" value="{{cat._id}}">{{cat.name}}</option>
						</select> <br />
						
						<label class="control-label">Chú thích:</label>
						<input type="text" class="form-control" ng-model="newmap.description" placeholder="Nhập chú thích cho bản đồ">
						<br />
						<form class="form-inline" role="form">
							<div class="form-group">
								<label class="control-label">Tọa độ trung tâm:</label>
								<input type="text" class="form-control" ng-model="newmap.center" disabled="disabled">
							</div> &nbsp; &nbsp;
							<div class="form-group">
								<label class="control-label">Độ phóng:</label>
								<input type="number" class="form-control" ng-model="newmap.zoom" disabled="disabled"> 
							</div>
						</form>

					</div>

					<!-- =================== -->
					<div role="tabpanel" class="tab-pane fade" id="t-markers">
						<ul class="element-list">
							<li ng-repeat="mk in newmap.markers track by $index">
								Địa điểm: {{mk.coordinate}} - (~{{mk.radius}} km) <br>
								Ghi chú: {{mk.description}} <br>
								<span class="text-danger" ng-click="removeMarker($index)">Xóa</span>
							</li>
						</ul>
						<hr>
						<form action="" role="form" class="">
							<label for="">Tọa độ hiện tại</label>
							<input type="text" class="form-control" ng-model="markerForm.coordinate" disabled="disabled">
							<label for="">Bán kính tương đối (km)</label>
							<input type="number" class="form-control" ng-model="markerForm.radius">
							<label for="">Chú thích địa điểm</label>
							<input type="text" class="form-control" ng-model="markerForm.description">
							<br />
							<button class="btn btn-primary" ng-click="addMarker()">Thêm địa điểm</button>
						</form>
					</div>
					
					<!-- =================== -->
					<div role="tabpanel" class="tab-pane fade" id="t-polygons">
						<ul class="element-list">
							<li ng-repeat="plg in newmap.polygons track by $index">
								Tọa độ biên: {{plg.coordinate}} <br>
								Màu: {{plg.color}} <br>
								Ghi chú: {{plg.description}} <br>
								<span class="text-danger" ng-click="removePolygon($index)">Xóa</span>
							</li>
						</ul>
						<hr>
						<form action="" role="form" class="">
							<label for="">Tọa độ biên</label>
							<input type="text" class="form-control" ng-model="polygonForm.coordinate" disabled="disabled">
							<label for="">Màu sắc</label>
							<select class="category form-control" ng-model="polygonForm.color">
								<option value="#E74C3C">Màu đỏ</option>
								<option value="#2ECC71">Màu xanh lá</option>
								<option value="#F1C40F">Màu vàng</option>
								<option value="#3498DB">Màu xanh dương</option>
							</select> <br />
							<label for="">Chú thích vùng</label>
							<input type="text" class="form-control" ng-model="polygonForm.description">
							<br />
							<button class="btn btn-primary" ng-click="addPolygon()">Thêm vùng</button>
						</form>
					</div>

					<!-- =================== -->
					<div role="tabpanel" class="tab-pane fade" id="t-polylines">
						<ul class="element-list">
							<li ng-repeat="pll in newmap.polylines track by $index">
								Tọa độ đường: {{pll.coordinate}} <br>
								Màu: {{pll.color}} - Độ dày: {{pll.width}} <br>
								Ghi chú: {{pll.description}} <br>
								<span class="text-danger" ng-click="removePolyline($index)">Xóa</span>
							</li>
						</ul>
						<hr>
						<form action="" role="form" class="">
							<label for="">Tọa độ đường</label>
							<input type="text" class="form-control" ng-model="polylineForm.coordinate" disabled="disabled">
							<br />
							<div class="row">
								<div class="col-sm-3">
									<label for="">Màu sắc</label>
									<select class="form-control" ng-model="polylineForm.color">
										<option value="#E74C3C">Màu đỏ</option>
										<option value="#2ECC71">Màu xanh lá</option>
										<option value="#F1C40F">Màu vàng</option>
										<option value="#3498DB">Màu xanh dương</option>
									</select>
								</div>
								<div class="col-sm-3">
									<label for="">Độ dày</label>
									<select class="form-control" ng-model="polylineForm.width">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
									</select>
								</div>
								<div class="col-sm-3">
									<label for="">Mũi tên</label> 
									<select class="form-control" ng-model="polylineForm.arrow">
										<option value="0">Không</option>
										<option value="1">Có</option>
									</select>
								</div>
								<div class="col-sm-3">
									<label for="">Loại nét</label>
									<select class="form-control" ng-model="polylineForm.style">
										<option value="solid">Nét liền</option>
										<option value="dashed">Nét đứt</option>
									</select>
								</div>
							</div>
							<label for="">Chú thích đường</label>
							<input type="text" class="form-control" ng-model="polylineForm.description">
							<br />
							<button class="btn btn-primary" ng-click="addPolyline()">Thêm đường</button>
						</form>
					</div>

					<div role="tabpanel" class="tab-pane fade" id="t-provinces">
						dwqdwq
					</div>

					<div role="tabpanel" class="tab-pane fade" id="t-countries">
						dwqdwqd
					</div>

					<!-- =================== -->
					<div role="tabpanel" class="tab-pane fade" id="t-grounds">
						<ul class="element-list">
							<li ng-repeat="ovl in newmap.grounds track by $index">
								Link ảnh: {{ovl.url}} <br>
								Tọa độ: {{ovl.sw}} -- {{ovl.ne}} <br>
								Ghi chú: {{ovl.description}} <br>
								<span class="text-danger" ng-click="removeGroundOvl($index)">Xóa</span>
							</li>
						</ul>
						<hr>
						<form action="" role="form" class="">
							<label for="">Đường dẫn hình ảnh</label>
							<input type="text" class="form-control" ng-model="groundForm.url">
							<div class="row">
								<div class="col-sm-6">
									<label for="">Điểm dưới-trái</label>
									<input type="text" class="form-control" ng-model="groundForm.sw" disabled="disabled">
								</div>
								<div class="col-sm-6">
									<label for="">Điểm trên-phải</label>
									<input type="text" class="form-control" ng-model="groundForm.ne" disabled="disabled">
								</div>
							</div>
							<label for="">Chú thích lược đồ</label>
							<input type="text" class="form-control" ng-model="groundForm.description">
							<br />
							<button class="btn btn-primary" ng-click="addGroundOvl()">Thêm lược đồ</button>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="panel-footer">
			<div class="pull-right">
				<button class="btn btn-warning">Xóa</button> &nbsp; &nbsp;
				<button class="btn btn-primary" ng-click="addMap()">Thêm bản đồ</button>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
		

</div>

<div class="wrapper list-map" ng-show="vlist">
	<div id="list-map">
		
	</div>
	<p class="descript">{{mapdescript}}</p>
	<h2>DANH SÁCH</h2>
	<ul class="list">
		<li ng-repeat="map in mapList" ng-click="viewMap(map._id)">
			<img src="<?php echo base_url() ?>assets/images/maps-img.png" alt="">
			<div class="info">
				<p class="name">{{map.description}}</p>
			</div>
		</li>

	</ul>
</div>